<template>
    <div class="">
        <a-comment class="" v-for="item in comments" :key="item.uid">
            <div class="commentWrap ml-74 text-xl text-black font-sans">
                <div class="commentWrap-header flex flex-row gap-2 items-center">
                    <a-avatar class="w-18 h-18" :class="item.layer === 1 ? '' : 'ml-6'" slot="avatar" :src="item.avatar"
                        :alt="item.userName" />
                    <a class="" slot="author">{{ item.userName }}</a>
                    <a-tooltip :title="_dayjs.format('YYYY-MM-DD HH:mm:ss')">
                        <span class="text-[#aaa] text-[16px]"> &nbsp;{{ _dayjs.fromNow() }}</span>
                    </a-tooltip>
                </div>
                <p slot="content" class="commentContent pl-20 ">
                    {{ item.content }}
                </p>
                <div class="actionsWrap flex flex-row ">
                    <span class="bg-[#aaffee] rounded-md border py-2 px-3 ml-20 " slot="actions"
                        @click="replyTo(item.uid)">回复</span>
                    <div class="lk ml-auto flex gap-5 items-top">
                        <span class="" key="comment-basic-like">
                            <a-tooltip title="Like">
                                <template v-if="action === 'liked'">
                                    <LikeFilled class="" @click="like" />
                                </template>
                                <template v-else>
                                    <LikeOutlined @click="like" />
                                </template>
                            </a-tooltip>
                            <span style="padding-left: 8px; cursor: auto">
                                {{ likes }}
                            </span>
                        </span>
                        <span class="" key="comment-basic-dislike">
                            <a-tooltip title="Dislike">
                                <template v-if="action === 'disliked'">
                                    <DislikeFilled @click="dislike" />
                                </template>
                                <template v-else>
                                    <DislikeOutlined @click="dislike" />
                                </template>
                            </a-tooltip>
                            <span style="padding-left: 8px; cursor: auto">
                                {{ dislikes }}
                            </span>
                        </span>
                    </div>

                </div>
            </div>

            <CommentBox class="comment" :userInfo="userInfo" :reply-info="replyInfo" :id="item.uid" @submit-box="submitBox"
                @cancel-box="cancelBox"></CommentBox>

            <CommentList :comments="item.reply"></CommentList>

        </a-comment>
    </div>
</template>
<script>
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime';
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
// import { mapMutations } from 'vuex';
import CommentBox from "@/components/comments/CommentBox.vue";
dayjs.extend(relativeTime)
export default {
    name: "CommentList",
    props: ['comments'],
    data() {
        return {
            _dayjs:dayjs(),
            likes: 0,
            dislikes: 0,
            actions: '',
            showCancle: true,
            submitting: false,
            value: '',
            userInfo: {
                uid: "uid000001",
                userName: "张三",
                avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"

            },
            replyInfo: {
                uid: "",
                blogUid: "uid000003",
                replyUserUid: 0,
                avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            },
        };
    },
    created() {

    },
    components: {
        CommentBox,
        LikeFilled,
        LikeOutlined,
        DislikeFilled,
        DislikeOutlined
    },

    compute: {},
    methods: {
        // ...mapMutations(['setCommentList', 'increment']),
        like() {
            this.likes += 1
            this.actions = 'liked'
        },
        dislike() {
            this.dislikes += 1
            this.actions = 'disliked'
        },
        replyTo: function (uid) {
            var lists = document.getElementsByClassName("comment");
            // let commentCountBar = lists[0].querySelector('.Number')
            for (var i = 0; i < lists.length; i++) {
                lists[i].style.display = 'none';
            }
            document.getElementById(uid).style.display = 'block';
            document.getElementById(uid).querySelector('.Number').style.display = 'none'
            // commentCountBar.style.display = 'none';
            this.replyInfo.replyUid = uid
        },
        submitBox(e) {
            // 一级评论
            if (e.replyUid == 0) {
                var firstComment = this.$store.state.app.commentList;
                firstComment.push(e);
                // this.$store.commit("setCommentList", firstComment);
                // this.$store.commit("increment");
                return;
            }

            document.getElementById(e.replyUid).style.display = 'none'
            var comments = this.$store.state.app.commentList;
            this.updateCommentList(comments, e.replyUid, e)
            // this.$store.commit("setCommentList", comments);
            // this.$store.commit("increment");

        },
        cancelBox(e) {
            console.log(e)
            document.getElementById(e).style.display = 'none'
        },
        updateCommentList(commentList, uid, targetComment) {

            if (commentList == undefined || commentList.length <= 0) {
                return;
            }

            for (let item of commentList) {
                console.log("递归中", item.uid, uid)
                if (item.uid === uid) {
                    var menu = item.reply;
                    menu.push(targetComment);
                } else {
                    this.updateCommentList(item.reply, uid, targetComment);
                }
            }
        }
    },
};
</script>
<style>
.comment {
    display: none;
}

.ant-comment {
    .ant-comment-inner {
        padding: 10px 0;
        margin-left: 18.5rem;

        .ant-comment-content {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

        }
    }
}
</style>
